<template>
  <div id="userListPage">
    <div style="padding-bottom: 15px;text-align: left;display: flex;">
      <el-button type="primary" @click="dialogFormVisible = true;">添加用户</el-button>
      <div class="moneyCount">总金额：<span class="colorRed">{{userMoneyCount.balance}}</span>  总冻结金额：<span class="colorRed">{{userMoneyCount.lockMoney}}</span></div>
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible" size="small">
        <el-form :model="userInfo">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="userInfo.username" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="userInfo.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" :label-width="formLabelWidth">
            <el-input v-model="userInfo.cardNo" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="银行手机号" :label-width="formLabelWidth">
            <el-input v-model="userInfo.cardPhone" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="持卡人" :label-width="formLabelWidth">
            <el-input v-model="userInfo.cardPerson" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="userInfo.remark" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否自动提现" :label-width="formLabelWidth">
            <el-radio class="radio" v-model="userInfo.isAutoCash" label="1">是</el-radio>
            <el-radio class="radio" v-model="userInfo.isAutoCash" label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="是否自动代付" :label-width="formLabelWidth">
            <el-radio class="radio" v-model="userInfo.isAutoDf" label="1">是</el-radio>
            <el-radio class="radio" v-model="userInfo.isAutoDf" label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="自动提现金额" :label-width="formLabelWidth">
            <el-input v-model="userInfo.autoCashBalance" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="私钥" :label-width="formLabelWidth">
            <el-input v-model="userInfo.secretKey" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="公钥" :label-width="formLabelWidth">
            <el-input v-model="userInfo.publicKey" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="状态" :label-width="formLabelWidth">

            <el-radio class="radio" v-model="userInfo.status" label="1">是</el-radio>
            <el-radio class="radio" v-model="userInfo.status" label="2">否</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="warning" @click="generetorRSA">生成秘钥对</el-button>
          <el-button type="info" @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table :data="tableData" border style="width: 100%" v-loading="loading1">
      <el-table-column prop="id" label="ID">
      </el-table-column>
      <el-table-column prop="username" label="用户名" >
      </el-table-column>
      <el-table-column prop="balance" label="余额">
      </el-table-column>
      <el-table-column prop="lockMoney" label="冻结金额">
      </el-table-column>
      <el-table-column prop="remark" label="备注" >
      </el-table-column>
      <el-table-column label="自动提现">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isAutoCash" :active-value="1" :inactive-value="0" on-color="#13ce66"
                     @change="isAutoCash(scope.row.isAutoCash,scope.row.id)" off-color="#ff4949" on-text="是"
                     off-text="否">
          </el-switch>
        </template>

      </el-table-column>
      <el-table-column label="自动代付">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isAutoDf" :active-value="1" :inactive-value="0" on-color="#13ce66"
                     @change="isAutoDf(scope.row.isAutoDf,scope.row.id)" off-color="#ff4949" on-text="是"
                     off-text="否">
          </el-switch>
        </template>

      </el-table-column>
      <el-table-column prop="name" label="状态">
        <template slot-scope="scope">
          <!--<el-switch v-model="value2" on-color="#13ce66" off-color="#ff4949" @change="changeStatus(scope.row.isAutoCash,scope.row.id)" on-text="启用" off-text="暂停">
                    </el-switch>-->
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" on-color="#13ce66"
                     @change="userStart(scope.row.id, scope.row.status)" off-color="#ff4949" on-text="是"
                     off-text="否">
          </el-switch>
          <!--<div style="white-space: nowrap;">-->
            <!--<el-button type="primary" :disabled="scope.row.status == 1?true:false" size="mini"-->
                       <!--@click="userStart(scope.row.id)">启用-->
            <!--</el-button>-->
            <!--<el-button type="primary" :disabled="scope.row.status == 2?true:false" size="mini"-->
                       <!--@click="userStop(scope.row.id)">停用-->
            <!--</el-button>-->
          <!--</div>-->
        </template>
      </el-table-column>
      <el-table-column label="冻结/解冻">
        <template slot-scope="scope">
          <div style="white-space: nowrap;">

          <el-button type="primary" size="mini" @click="fixMoney(scope.row.id)">冻结</el-button>
          <el-button type="primary" size="mini" @click="backMoney(scope.row.id)">解冻</el-button>
          </div>
        </template>

      </el-table-column>
      <el-table-column label="修改用户">
        <template slot-scope="scope">
          <el-button type="text" @click="reviseUser(scope.row)">修改</el-button>
          <el-dialog :visible.sync="dialogVisible" size="small">
            <my-merchant :userInfo="userData" @reviseUser=receiveMsg></my-merchant>
          </el-dialog>
        </template>
      </el-table-column>

      <el-table-column label="绑定商户">
        <template slot-scope="scope">
          <el-button type="text" @click="likeBusiness(scope.row.id)">绑定商户</el-button>
        </template>
      </el-table-column>

      <el-table-column label="绑定代付商户">
        <template slot-scope="scope">
          <el-button type="text" @click="likeDfBusiness(scope.row.id)">绑定代付商户</el-button>
        </template>
      </el-table-column>

      <el-table-column label="绑定角色">
        <template slot-scope="scope">
          <el-button type="text" @click="handleRoleManage(scope.row)">绑定角色</el-button>

        </template>

      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible2" size="small" :before-close="handleClose">
      <my-transfer :dataArr="businessArr" @businessId="receiveData"></my-transfer>

      <div>
        <el-button type="primary" @click="saveList()">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="roleDialogVisible">
      <business-transfer :user="userData" :transfer="roles" @success="handleRoleDialogSuccess"></business-transfer>
    </el-dialog>

<!--绑定代付商户弹窗-->
    <el-dialog
      title="绑定代付商户"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>商户：</span>
      <el-select v-model="value4" clearable placeholder="请选择需要绑定的商户">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="bind_dfBusiness">确 定</el-button>
  </span>
    </el-dialog>


    <div class="block" style="padding: 15px;text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[5, 8, 10, 13, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import transfer from './transfer'
  import merchant from '../merchantMange/merchant'
  import businessTransfer from '../userMange/UserRole.vue'
  import md5 from 'md5'

  export default {
    data () {
      return {
        loading1: false,
        roleDialogVisible: false,
        dialogVisible2: false,
        dialogVisible: false,
        value2: false,
        tableData: [],
        dialogFormVisible: false,
        formLabelWidth: '100px',
        userData: {},
        userMoneyCount: {},
        roles: {},
        userInfo: {
          username: "",
          password: undefined,
          autoCashBalance: "",
          cardNo: "",
          cardPerson: '',
          cardPhone: '',
          isAutoCash: '0',
          secretKey: '',
          status: '1',
          remark: '',
          publicKey:'',
          isAutoDf:''
        },
        pageSize: 10,
        total: 1,
        pageNumber: 1,
        businessArr: [],
        businessIdArr: [],
        radio: '1',
        AutoCash: true,
        centerDialogVisible:false,
        options:[
        ],
        userId:undefined,
        value4:''

      }
    },
    created() {
      this.getUserList();
      this.getuserMoneyCount()
    },
    methods: {
      bind_dfBusiness(){
       let params = {
         id: this.userId,
         dfBusinessId:this.value4
       }
       this.$api.reviseUser(params).then(res =>{
         if (res.code==="000000"){
           this.$message.success("绑定代付商户成功！")
           this.centerDialogVisible=false
         }
       })
      },
      generetorRSA(){
        this.$api.getUserKet().then(res => {
            if (res.code == '000000'){
                this.userInfo.secretKey = res.data.RSAPrivateKey.encoded
                this.userInfo.publicKey = res.data.RSAPublicKey.encoded
            }
        })
      },
      getUserList() {
        let params = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber
        };
        this.loading1 = true;

        this.$api.getUserList(params).then((res) => {
          if (res.code == '000000') {
            this.loading1 = false;
            this.dialogFormVisible = false;
            this.tableData = res.data.list;
            this.total = res.data.totalRow;
            this.$message({
              type: 'success',
              message: "获取用户列表成功"
            })
          }
        })
      },
      getuserMoneyCount() {
        this.$api.getuserMoneyCount().then(res => {
          if (res.code === '000000') {
            this.userMoneyCount = res.data
          }
        })
      },
      likeDfBusiness(id){
        this.userId = id;
        let params = {
          pageSize:9999
        }
        this.$api.getAllowBusinessList(params).then(res => {
          if (res.code == '000000') {
            this.options = res.data.list;

          }
        })
        this.centerDialogVisible = true
      },
      handleRoleManage: function (row) {

        this.$api.getSeeRoleList(row.id).then(res => {
          this.roles = res.data
          this.userData = row
          this.roleDialogVisible = true
        })
      },
      handleRoleDialogSuccess() {
        this.roleDialogVisible = false
      },
      receiveData(val) {
        this.businessIdArr = val;
      },
      addUser() {
        this.dialogFormVisible = false;
        let _this = this;
        this.userInfo.password = md5(this.userInfo.password);
        this.$api.reviseUser(this.userInfo).then(function (res) {
          if (res.code == '000000') {

            _this.getUserList();
            _this.userInfo.username = "",

              _this.userInfo.password = "",
              _this.$message({
                message: '添加用户成功',
                type: 'success'
              });
          }
        })
      },
      test(e) {
        console.log(e.row)
      },
      userStart(id, mes) {
        let _this = this;
        if (mes == 1) {
          this.$api.getStart(id).then(function (res) {
            if (res.code == '000000') {
              _this.$message({
                type: 'success',
                message: "开启成功"

              });
              _this.getUserList();
            }

          })
        }
        if (mes == 0) {
          this.$api.getStop(id).then(function (res) {
            if (res.code == '000000') {
              _this.$message({
                type: 'success',
                message: "禁止成功"
              });
              _this.getUserList();
            }
          })
        }


      },
      userStop(id) {
        let _this = this;

      },

      //是否自动提现
      isAutoCash(mes, id) {
        let params = {
          id: id,
          isAutoCash: mes
        }
        let _this = this;
        this.$api.reviseUser(params).then(function (res) {
          if (res.code == '000000') {
            _this.$message({
              type: "success",
              message: "修改成功"
            })

          }
        })
      },
      isAutoDf(mes, id){
        let params = {
          id: id,
          isAutoDf: mes
        }
        let _this = this;
        this.$api.reviseUser(params).then(function (res) {
          if (res.code == '000000') {
            _this.$message({
              type: "success",
              message: "修改成功"
            })

          }
        })
      },
      fixMoney (id) {
        this.$prompt('请输入冻结金额', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
         if (value) {
           this.$api.fixMoney(id,{money: value}).then(res => {
             if (res.code === '000000') {
               this.$message.success('冻结成功')
               this.getUserList();
             }
           })
         } else {
           this.$message.info('请输入正确的格式')
         }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      backMoney (id) {
        this.$prompt('请输入解冻金额', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          if (value) {
            this.$api.backMoney(id,{money: value}).then(res => {
              if (res.code === '000000') {
                this.$message.success('解冻成功')
                this.getUserList();
              }
            })
          } else {
            this.$message.info('请输入正确的格式')
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      //删除用户
      deleteUser(id) {
        let _this = this;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deleteUser(id).then(function (res) {
            if (res.code == '000000') {
              console.log(res.data);
              _this.$message({
                type: 'success',
                message: '删除成功!'
              });
              _this.getUserList()
            }
          })

        })
      },
      reviseUser(mes) {
        this.userData = mes;
        this.dialogVisible = true
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getUserList()
      },
      handleCurrentChange(val) {
        this.pageNumber = val;
        this.getUserList()
      },
      handleClose() {

        this.dialogVisible2 = false;
      },
      likeBusiness(id) {
        let _this = this;
        sessionStorage.setItem("userId", id);
        this.$api.askBusiness(id).then(function (res) {
          if (res.code == '000000') {
            console.log(res.data);
            _this.businessArr = res.data;
            _this.dialogVisible2 = true;
          } else {
            _this.$message.error("获取商户列表失败")
          }
        });

      },
      saveList() {

        let params = {
          userId: sessionStorage.getItem("userId"),
          businessId: this.businessIdArr
        }
        let _this = this;
        _this.dialogVisible2 = false;

        this.$api.bindBusiness(params).then(function (res) {
          if (res.code == '000000') {

            _this.$message({
              type: "success",
              message: "绑定成功"
            })
          } else {
            _this.$message.error("绑定失败")
          }

        }).catch(() => {
          _this.$message("绑定失败")
        })
      },
      receiveMsg(mes) {
        if (mes == 'success') {
          this.getUserList();
          this.dialogVisible = false;
          this.$message({
            type: 'success',
            message: "修改成功"
          })
        }
        if (mes == 'default') {
          this.getUserList();
          this.dialogVisible = false;
          this.$message({
            type: 'error',
            message: "修改失败"
          })
        }
        if (mes == 'error') {
          this.getUserList();
          this.dialogVisible = false;
          this.$message({
            type: 'info',
            message: "已取消修改"
          })
        }
      }
    },
    components: {
      myTransfer: transfer,
      myMerchant: merchant,
      businessTransfer: businessTransfer
    }
  }
</script>

<style scoped>
  .cell {
    text-align: center;
    white-space: nowrap;
  }
  .moneyCount{
    align-self: center;
    margin-left: 20px;
    font-weight: bold
  }
  .colorRed{
    color: red;
    font-size: 18px;
    margin-right: 20px;
  }
  .el-button--mini{
    padding: 5px;
  }
</style>
